<template>
    <PopUps :bgIndex="1000"  :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="header">
                <div class="header-top">
                    <h3>{{ props.popTitle }}</h3>
                    <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
                </div>
                <div class="headerMain">
                    <el-form ref="formRef" :inline="true" :model="popUpsForm" :rules="rules" class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in popUpsFormLabel"
                            :key="index" :style="{ 'min-width': `${item.minWidth}'!important'` }">
                            <!-- 输入框 -->
                            <div class="optionsInput">
                                <el-input v-model="popUpsForm[item.name]" clearable :disabled="item.disabled || props.disabled" v-if="!item.type || item.type == 'input'" />
                            </div>
                            <!-- 下拉选框 -->
                            <el-select v-model="popUpsForm[item.name]" clearable :disabled="props.disabled" v-if="item.type == 'select'">
                                <el-option :label="item1.label" :value="item1.label" v-for="(item1, index) in item.client"
                                    :key="index" />
                            </el-select>
                            <!-- 日期选框 -->
                            <el-date-picker v-else-if="item.type == 'picker'" :disabled="props.disabled" v-model="popUpsForm[item.name]" type="date"
                                placeholder="请输入日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            <!-- 文本域 -->
                            <el-input :disabled="props.disabled" v-model="popUpsForm[item.name]" type="textarea" v-else-if="item.type == 'textarea'" />
                        </el-form-item>
                    </el-form>
                    <div class="btn">
                        <el-button type="primary" @click="onSubmit(formRef)" class="submit" v-if="props.defindFlag">{{ props.popTitle.slice(0, 2)
                        }}</el-button>
                        <el-button type="primary" @click="closePopUps" class="reset">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
import { reactive, ref, defineEmits, defineProps } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import {addInsertApplicationApi } from '@/api/inventory/index.js'
const emit = defineEmits(['popUpsFlase', 'getoutboundOrderData'])
let props = defineProps(['popTitle', 'disabled', 'PopData', 'defindFlag'])
let flag = ref(false)
const formRef = ref(null)
// 表单
let popUpsForm = ref({
    applicationId: '后台生成',      // 申请编号
    applicationPerson: '',      // 申请人
    applicationDate: '',    // 申请日期
    stockroomId: '',      // 入库编号
    supplierName: '',       // 供应商名称
    paymentMethods: '',       // 付款方式
    invoice: '',       // 发票
    paymentMoney: '',       // 付款金额
    receivingAccountInformation: '',       // 收款账户信息
    remarks: '',       // 备注
})
// 表单数据标题
let popUpsFormLabel = ref([
    {
        name: 'applicationId',
        label: '申请编号',
        disabled: true
    },
    {
        name: 'applicationPerson',
        label: '申请人',
    },
    {
        name: 'applicationDate',
        label: '申请日期',
        type: 'picker'
    },
    {
        name: 'stockroomId',
        label: '入库编号',
    },
    {
        name: 'supplierName',
        label: '供应商名称',
        type: 'select',
        client: [
            {
                label: '申请人',
                value: '0'
            },
            {
                label: '申请人1',
                value: '1'
            },
        ]
    },
    {
        name: 'paymentMethods',
        label: '付款方式',
        type: 'select',
        client: [
             {
                label: '公对公转账',
                value: '4'
            },
            {
                label: '银联',
                value: '0'
            },
            {
                label: '微信',
                value: '1'
            },
            {
                label: '支付宝',
                value: '2'
            },
            {
                label: '现金',
                value: '3'
            },
    
        ]
    },
    {
        name: 'invoice',
        label: '发票',
        type: 'select',
        client: [
            {
                label: '增值税发票',
                value: '0'
            },
            {
                label: '普通发票',
                value: '1'
            },
        ]
    },
    {
        name: 'paymentMoney',
        label: '付款金额',
    },
    {
        name: 'receivingAccountInformation',
        label: '收款账户信息',
        type: 'textarea'
    },
    {
        name: 'remarks',
        label: '备注',
        type: 'textarea'
    },

])

// 入库信息校验
const rules = reactive({
    applicationPerson: [
        {
            required: true,
            message: '申请人',
            trigger: 'change',
        }
    ],
    applicationDate: [
        {
            required: true,
            message: '申请日期',
            trigger: 'change',
        }
    ],
    stockroomId: [
        {
            required: true,
            message: '入库编号',
            trigger: 'change',
        }
    ],
    supplierName: [
        {
            required: true,
            message: '供应商名称',
            trigger: 'change',
        }
    ],
    paymentMethods: [
        {
            required: true,
            message: '付款方式',
            trigger: 'change',
        }
    ],
    paymentMoney: [
        {
            required: true,
            message: '付款金额',
            trigger: 'change',
        }
    ],

})

// 关闭
const closePopUps = () => {
    emit('popUpsFlase', false)
}

// 取消
const onCancel = () => {
    flag.value = false
}

// 新增
const onSubmit = (formRef) => {
    ElMessageBox.confirm(
        '确认' + props.popTitle + '信息？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(async () => {
        if (!formRef) return
        await formRef.validate((valid) => {
            if (valid) {
                // 发送新增接口请求
                // 发送新增请求
                popUpsForm.value.applicationId = ''
                let parasm = popUpsForm.value
                addInsertApplicationApi(parasm).then(res => {
                    popUpsForm.value.applicationId = '后台生成'
                    if (res.code == 200) {
                        emit('getoutboundOrderData')
                        closePopUps()
                        ElMessage({
                            type: 'success',
                            message: res.msg,
                        })
                    }
                })
            }
        })
    })
}
// 数据回显
const assignmentFun = () => {
   
    popUpsForm.value  = props.PopData
}
onMounted(() => {
    // 数据回显
    if (!props.defindFlag) {
        assignmentFun()
    }
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.form-inline {
    :deep(.el-form-item__label) {
        width: 80px;
    }

    :deep(.el-form-item) {
        width: 190px;
    }
}

.el-input__wrapper {
    --el-select-width: 220px;
}

:deep(.el-form-item) {
    width: 220px !important;
}

:deep(.el-form-item__label) {
    width: 120px;
    text-align: right;
}

:deep(.el-textarea__inner) {
    width: 180px;
}

.optionsInput {
    display: flex;

    .btn {
        background-color: #829BFF;
        color: #fff;
    }
}

@mixin publicH3 {
    font-weight: 550;
    position: relative;
    font-size: 16px !important;

    &::after {
        content: '';
        width: 5px;
        height: 20px;
        background-color: #1947FF;
        border-radius: 5px;
        position: absolute;
        left: -15px;
        top: -2px;
    }
}

@mixin titlePadding {
    padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {
    :deep(.el-form-item) {
        margin-right: 30px !important;
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
    }

    :deep(.el-input__wrapper) {
        width: 132px;
    }

    :deep(.el-date-editor--datetimerange) {
        width: 240px;
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
}

.popups-box {

    .header {
        .header-top {
            @include titlePadding;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0px;
            background: #FFF;
            z-index: 2024;

            h3 {
                @include publicH3;
            }

            .iconfont {
                color: #666;
                font-size: 27px;
            }
        }

        .headerMain {
            .demo-form-inline {
                @include pubilcForm;
            }

            .btn {
                margin-top: 100px;
                padding-right: 50px;
                text-align: right;

                .el-button {
                    width: 50px;
                    height: 25px;
                    font-size: 12px;
                }

                .reset {
                    background-color: #E4E9FC;
                    color: #333;
                    border: none;
                }
            }
        }
    }

}
</style>